<template>
  <!-- 客户详情 -->
  <div class="container">
    <div class="header">
      <div class="top">
        <van-icon name="arrow-left" @click="leftClick" />
        <span>客户详情</span>
        <van-icon name="wap-home-o" @click="indexClick" />
      </div>
      <div class="middle">
        <div class="left">
          <img src="../assets/头像.png" alt="" />
          <span>张全有</span>
        </div>
        <div class="right">
          <van-icon name="todo-list-o" />
          <span @click="redactClick(basic.id)">编辑信息</span>
        </div>
      </div>
      <div class="mytop">
        <img src="../assets/基本信息.png" alt="" />
        <span>基本信息</span>
      </div>
    </div>

    <div class="major">
      <ul>
        <li>
          客户名称<span>{{ basic.custName }}</span>
        </li>
        <li>
          联系电话<span>{{ basic.telephone }}</span>
        </li>
        <li class="active">
          学历<span>{{ basic.education }}</span>
        </li>
        <li class="active">
          性别<span>{{ basic.sex }}</span>
        </li>
        <li class="active">
          年龄<span>{{ basic.age }}</span>
        </li>
        <li>
          所属城市<span>{{ basic.cityName }}</span>
        </li>
        <li>
          公司名称<span>{{ basic.company }}</span>
        </li>
        <li class="active">
          职位<span>{{ basic.position }}</span>
        </li>
        <li>
          录入时间<span>{{ basic.createTime }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetDetails } from "../raxios/api";
export default {
  data() {
    return {
      basic: {},
    };
  },
  methods: {
    leftClick() {
      this.$router.go(-1);
    },
    indexClick() {
      this.$router.push("/home/cust");
    },
    redactClick(id) {
      this.$router.push("/Redact?id=" + id);
    },
  },
  created() {
    console.log(this.$route.query.id);
    GetDetails(this.$route.query.id).then((res) => {
      if (res.errCode == 0) {
        console.log(res.data);
        this.basic = res.data;
      }
    });
  },
};
</script>
 
<style  lang="less" scoped>
.container {
  // width: 100%;
  // height: 100%;
  // background: url('../assets/底纹.png') no-repeat bottom left;
  .header {
    height: 2rem;
    background-color: #003399;
    position: relative;
    .top {
      padding: 0.1rem;
      display: flex;
      justify-content: space-between;
      color: #fff;
      .van-icon {
        font-size: 0.28rem;
      }
      span {
        font-size: 0.18rem;
      }
    }
    .middle {
      display: flex;
      justify-content: space-between;
      margin-top: 0.05rem;
      img {
        width: 0.7rem;
        height: 0.7rem;
        margin: 0 0.2rem;
        vertical-align: middle;
      }
      span {
        font-size: 0.18rem;
        color: #fff;
      }
      .right {
        background-color: #335cad;
        width: 1.2rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        border-radius: 0.2rem 0 0 0.2rem;
        margin-top: 0.2rem;
        color: #bfc8da;
        span {
          font-size: 0.16rem;
        }
        .van-icon {
          font-size: 0.2rem;
          vertical-align: middle;
          margin-right: 0.05rem;
        }
      }
    }
    .mytop {
      width: 96%;
      height: 0.5rem;
      line-height: 0.5rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -48%;
      background-color: #fff;
      padding: 0 0.1rem 0;
      border-bottom: 1px dashed #efefef;
      z-index: 2;
      box-sizing: border-box;
      img {
        width: 0.24rem;
        vertical-align: middle;
        margin-right: 0.1rem;
      }
    }
  }

  .major {
    width: 96%;
    margin-left: 2%;
    height: 80vh;
    // background-color: #fff;
    // background: url('../assets/底纹.png') no-repeat top center cover;
    background: url('../assets/底纹.png') no-repeat bottom center;
    ul {
      li {
        height: 0.34rem;
        line-height: 0.34rem;
        font-size: 0.16rem;
        margin-left: 0.2rem;
        color: #adadad;
        span {
          margin-left: 0.1rem;
        }
      }
      .active {
        padding-left: 0.4rem;
      }
    }
  }
}
</style>